<template>
  <el-popover
    ref="popover"
    :placement="placement"
    width="120"
    :visible-arrow="false"
    :append-to-body="false"
    :popper-options="{
      boundariesElement: 'body'
    }"
    popper-class="map-operation-panel"
    v-model="visible"
    trigger="manual"
  >
    <el-button
      size="mini"
      slot="reference"
      circle
      class="mop-trigger-button"
      title="展开操作面板"
      @click="visible = !visible"
    >
      <i class="ri-equalizer-fill f-16" />
    </el-button>
    <el-container class="map-op-popover-container">
      <el-header height="auto">
        <div class="flex-between full-width panel-header-row b-b">
          <span>操作面板</span>
          <span
            @click="visible = false"
            class="p-l-mini flex-ai-c f-16 c-pointer fold-panel"
            title="收起面板"
          ><i class="el-icon-caret-top" /></span>
        </div>
      </el-header>
      <el-main>
        <div class="f-14">
          <div
            class="p-a-mini tool-part"
            v-if="shapes.length"
          >
            <div class="tool-title">
              {{ addShapeTitle }}
            </div>
            <div class="d-flex p-t-mini">
              <div
                class="mop-tool-icon no-margin-bottom c-pointer"
                :class="(i + 1) % 3 === 0 ? 'no-margin-right' : ''"
                v-for="(shape, i) in shapes"
                :key="shape.value"
                @click="addShape(shape)"
              >
                {{ shape.label }}
              </div>
            </div>
          </div>
          <div
            class="p-a-mini tool-part"
            v-if="hasMapMode"
          >
            <div class="tool-title">
              地图布局模式
            </div>
            <div class="d-flex p-t-mini">
              <div
                class="mop-tool-icon no-margin-bottom  c-pointer"
                v-for="(m, i) in mapModeList"
                :key="m.value"
                :class="[
                  {'active-tool': mapMode === m.value},
                  i === 3 ? 'no-margin-right' : 'tiny-margin-right'
                ]"
                @click="mapMode=m.value"
                :title="m.label"
              >
                <img :src="require('@/components/geo-map/images/' + m.icon + '.png')">
              </div>
            </div>
          </div>
          <div class="p-h-mini p-t-mini tool-part">
            <div class="tool-title">
              地图工具
            </div>
            <div class="flex-wrap p-t-mini">
              <div
                :class="[
                  'mop-tool-icon c-pointer',
                  (i + 1) % 3 === 0 ? 'no-margin-right' : '',
                  tool.value === 'xianshi' && !popupDisabled ? 'active-tool' : '',
                  tool.value === 'dingwei' && locatePanelVisible ? 'active-tool' : '',
                  tool.value === 'sousuo' && searchPanelVisible ? 'active-tool' : '',
                  tool.value === 'tuceng' && layerControllerVisible ? 'active-tool' : '',
                ]"
                v-for="(tool, i) in mapToolList"
                :key="tool.value"
                v-show="tool.visible"
                :title="tool.label"
                @click="handleClick(tool)"
              >
                <img :src="require('@/components/geo-map/images/' + tool.icon + '.png')">
              </div>
            </div>
          </div>
          <div
            class="tool-part p-v-mini"
            v-if="hasStage"
          >
            <div class="tool-title">
              历时
            </div>
            <BKSelect
              v-model="currentStage"
              size="mini"
              popper-class="semitransparent-dropdown"
              :clearable="false"
              dictionary-key="YSQJC_JC_BYTJBZLS"
              class="f-14 transparent-select"
            />
          </div>
          <div
            class="p-v-mini"
            v-if="['2', '-1', '3'].includes(mapMode) && hasStage"
          >
            <div class="d-flex jc-c">
              <div class="tool-title small-font">
                对比影像
              </div>
            </div>
            <BKSelect
              v-model="contrastStage"
              size="mini"
              popper-class="semitransparent-dropdown"
              :clearable="false"
              :mock="stageList"
              class="f-14 transparent-select"
            />
          </div>
        </div>
      </el-main>
      <LocatePanel
        v-show="locatePanelVisible"
        ref="locatePanel"
        :is-global="isGlobal"
        :style="panelStyle"
        @close="locatePanelVisible=false"
      />
      <SearchPanel
        v-show="searchPanelVisible"
        ref="searchPanel"
        :is-global="isGlobal"
        :style="panelStyle"
      />
      <LayerController
        v-show="layerControllerVisible"
        ref="layerController"
        :is-global="isGlobal"
        :style="panelStyle"
        @close="layerControllerVisible=false"
      />
    </el-container>
  </el-popover>
</template>

<script>
import { mapState } from 'vuex'
import LocatePanel from './locate-panel.vue'
import SearchPanel from './search-panel.vue'
import LayerController from './layer-controller.vue'

export default {
  name: 'OperationPanel',
  components: {
    LocatePanel,
    SearchPanel,
    LayerController
  },
  data () {
    return {
      visible: true,
      mapMode: '1',
      locatePanelVisible: false,
      searchPanelVisible: false,
      layerControllerVisible: false,
      currentStage: '',
      contrastStage: ''
    }
  },
  props: {
    isGlobal: {
      type: Boolean,
      default: true
    },
    placement: {
      type: String,
      default: 'bottom-end'
    },
    addShapeTitle: {
      type: String,
      default: '新增图斑'
    },
    shapes: {
      type: Array,
      default: () => [
        // { label: '点', value: '1' },
        // { label: '线', value: '2' },
        // { label: '面', value: '3' }
      ]
    },
    // 地图布局模式
    hasMapMode: {
      type: Boolean,
      default: true
    },
    // 测距、测面
    hasCalculate: {
      type: Boolean,
      default: true
    },
    // 期别
    hasStage: {
      type: Boolean,
      default: false
    },
    // 图层管理
    hasLayerManager: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    ...mapState('map', ['popupDisabled', 'mapModeList', 'stageList', 'defaultStage']),
    mapToolList () {
      return [
        { label: '全貌', value: 'quanmao', icon: 'quanmao', visible: true },
        { label: '放大', value: 'fangda', icon: 'fangda', visible: true },
        { label: '缩小', value: 'suoxiao', icon: 'suoxiao', visible: true },
        { label: '测距', value: 'ceju', icon: 'ceju', visible: this.hasCalculate },
        { label: '测面', value: 'cemian', icon: 'cemian', visible: this.hasCalculate },
        { label: '定位', value: 'dingwei', icon: 'dingwei', visible: true },
        { label: '搜索', value: 'sousuo', icon: 'sousuo', visible: true },
        { label: '显示信息', value: 'xianshi', icon: 'xianshi', visible: this.isGlobal },
        { label: '图层', value: 'tuceng', icon: 'tuceng', visible: this.hasLayerManager }
      ]
    },
    panelStyle () {
      if (this.placement === 'bottom-end') {
        return {
          left: '-10px',
          transform: 'translateX(-100%)'
        }
      } else {
        return {
          right: '-10px',
          transform: 'translateX(100%)'
        }
      }
    }
  },
  activated () {
    this.$nextTick(() => {
      if (this.visible) {
        this.$refs.popover.updatePopper()
      }
    })
  },
  watch: {
    async mapMode (v) {
      this.notice && this.notice.close()
      if (v === '3') {
        this.notice = this.$notify({
          title: '提示',
          message: '按下Shift+C进行影像切换',
          duration: 0
        })
      }
      if (['2', '-1', '3'].includes(v)) {
        if (this.stageList.length) {
          this.contrastStage = this.stageList[0].value
        }
      }
      if (this.isGlobal) {
        await this.$mapManager.invoke('switchMapMode', v)
      } else {
        this.$emit('mapModeChange', v)
      }
    },
    defaultStage: {
      immediate: true,
      handler (v) {
        this.currentStage = v
      }
    },
    currentStage: {
      immediate: true,
      handler (v) {
        this.$emit('currentStageChange', v)
      }
    },
    contrastStage: {
      immediate: true,
      handler (v) {
        this.$emit('contrastStageChange', v)
      }
    }
  },
  methods: {
    addShape (shape) {
      this.$emit('addShape', shape)
    },
    handleClick (item) {
      switch (item.value) {
        case 'ceju':
        case 'cemian':
          if (this.isGlobal) {
            this.$mapManager.invoke('invokeUtils', item.value, {})
          } else {
            this.$emit('invokeUtils', item.value, {})
          }
          break
        case 'fangda':
        case 'suoxiao':
        case 'quanmao':
          if (this.isGlobal) {
            this.$mapManager.invoke('setZoom', item.value)
          } else {
            this.$emit('invokeUtils', 'setZoom', item.value)
          }
          break
        case 'xianshi':
          this.$store.commit('map/togglePopupDisabled')
          if (this.popupDisabled) {
            this.$mapManager.invoke('closePopup')
          }
          break
        case 'tuceng':
          this.togglePanel('layerController')
          break
        case 'dingwei':
          this.togglePanel('locatePanel')
          break
        case 'sousuo':
          this.togglePanel('searchPanel')
          break
        default:
          break
      }
    },
    togglePanel (name) {
      const panelNames = ['searchPanel', 'locatePanel', 'layerController']
      panelNames.splice(panelNames.indexOf(name), 1)
      for (const n of panelNames) {
        this[`${n}Visible`] = false
        this.$refs[n].reset()
      }
      this[`${name}Visible`] = !this[`${name}Visible`]
      this.$nextTick(() => {
        if (this[`${name}Visible`]) {
          this.$refs[name].focus()
        } else {
          this.$refs[name].reset()
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.mop-trigger-button {
  border: none;
  color: #fff;
  padding: 7px 8px;
  background: radial-gradient(#00a1ff 0%, #4466f3 100%);
}

.map-op-popover-container {
  position: relative;
  // color: #fff;
  border-radius: 6px;

  .panel-header-row {
    padding: 5px 10px;
    border-radius: 4px;

    .fold-panel {
      // color: #ffffff82;

      &:hover {
        // color: #fff;
        color: #000;
      }
    }
  }

  .tool-part {
    border-bottom: 1px solid #79abf363;
  }

  .tool-title {
    text-align: center;
    // color: #ffffffbd;

    &.small-font {
      font-size: 12px;
      line-height: 18px;
    }
  }

  .active-tool {
    background: #1047a9 !important;
  }

  .mop-tool-icon {
    width: 26px;
    height: 24px;
    // background: #011f41;
    background: #0091ffdb;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px 10px 0;

    &.tiny-margin-right {
      margin-right: 5px;
    }

    &.no-margin-right {
      margin-right: 0;
    }

    &.no-margin-bottom {
      margin-bottom: 0;
    }

    &:focus,
    &:hover {
      background: #0091ff;
    }
  }
}
</style>

<style lang="scss">
.map-operation-panel.el-popover {
  padding: 0;
  border: 0;
  top: -44px !important;
  background: transparent;
  min-width: 120px;
}
</style>
